<template>
	<scroll-view @scroll="scroll" :scroll-y="isCanScroll" :style="{ height: scrollsettingHight }"
		:scroll-top="scrollGoTop" :enhanced="true" :bounces="false" @scrolltolower="scrolltolower"
		:show-scrollbar="scrollbar" @scrolltoupper="scrolltoupper" >
		<view class="scroll-view">
			<slot></slot>
		</view>
	</scroll-view>
</template>

<script>
export default {
	// 禁用ios弹性的容器
	name: 'ui-container', 
	props: {
		isCanScroll: {
			type: Boolean,
			default: true
		},
		full: {
			type: Boolean,
			default: false
		},
		// 处理插槽内有input表单时，输入框会偏移问题
		isForm: {
			type: Boolean,
			default: false
		},
		scrollGoTop: {
			type: Number,
			default: 300
		},
		scrollbar: {
			type: Boolean,
			default: true
		},
		headerHeight: {
			type: Number,
			default: 0
		}
	},
	watch: {
		headerHeight(val) {
			if (val) {
				let config = uni.getSystemInfoSync();
				this.scrollsettingHight = (config.screenHeight - val) + 'px';
			}
		}
	},
	data() {
		return {
			scrollsettingHight: ''
		};
	},
	created() {
		let config = uni.getSystemInfoSync();
		if (this.isForm) {
			this.scrollsettingHight = 'calc(100vh - 1px)';
		} else if (this.full) {
			this.scrollsettingHight = (config.windowHeight) + 'px';
		} else {
			this.scrollsettingHight = (config.screenHeight - 95 - 88 + 25) + 'px';
		}
	},
	methods: {
		scrolltolower() {
			this.$emit('scrolltolower');
		},
		scroll(e) {
			this.$emit('scroll', e);
		},
		scrolltoupper() {
			this.$emit('scrolltoupper',);
		},
		
	}
};
</script>

<style lang="scss" scoped>
.scroll-view {
	width: 100%;
}
</style>
